{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
    <link href="{% static 'css/main.css' %}" rel="stylesheet">
</head>
<body id="index">
<div id="nav-placeholder">
    <nav style="width: 220px;height: 100%;color: #fff; background-color: RGBA(33,37,41,var(--bs-bg-opacity,1))!important">
        <div class="logo">
            <div class="logo-image">
                <img src="{% static 'images/logo.gif' %}"/>
            </div>
            <div class="logo-title"></div>
        </div>
        <ul class="layui-nav layui-nav-tree" lay-filter="test" style="width: 220px">
            {% if "首页" in user.menuList %}
            <li class="layui-nav-item menu-item" data-page="home"><a href="/home/?userId={{user.userId}}">首页</a></li>
            {% endif %}
            {% if "用户管理" in user.menuList %}
            <li class="layui-nav-item menu-item" data-page="users"><a href="/users/?userId={{user.userId}}">用户管理</a>
            </li>
            {% endif %}
            {% if "后台管理" in user.menuList %}
            <li class="layui-nav-item menu-item" data-page="role"><a href="/admin/?userId={{user.userId}}">后台管理</a>
            </li>
            {% endif %}
            {% if "任务中心" in user.menuList %}
            <li class="layui-nav-item menu-item" data-page="task"><a href="/task/?userId={{user.userId}}">任务中心</a>
            </li>
            {% endif %}
            <li class="layui-nav-item menu-item layui-this" data-page="center"><a
                    href="/center/?userId={{user.userId}}">用户中心</a></li>
            <li class="layui-nav-item menu-item" data-page="heat"><a href="/heat/?userId={{user.userId}}">热度分析</a>
            </li>
            <li class="layui-nav-item menu-item" data-page="jobs"><a
                    href="/jobs/?userId={{user.userId}}">智能岗位推荐</a></li>
        </ul>
    </nav>
</div>
<div class="content" style="padding: 0;">
    <div id="header-placeholder" style="background-color: #fff;">
        <div class="header-menu">
            <div style=" padding: 10px">
                <i class="layui-icon layui-icon-home" style="margin-right: 10px"></i> 首页
            </div>
            <div class="user-info" style="display: flex;align-items: center">
                <dvi id="userinfo">
                    {{ user.userName }}
                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                    <div id="drop-menu" style="display: none">
                        <ul>
                            <li><a href="/login/">退出登录</a></li>
                            <li><a href="/center/?userId={{user.userId}}">个人中心</a></li>
                        </ul>
                    </div>
                </dvi>
            </div>
        </div>
        <div class="header-tab" style="border-top: 1px solid #dedede">
            <div class="breadcrumb" style="padding: 10px">
        <span class="layui-breadcrumb" lay-separator="|">
          <a href="/users/?userId={{ user.userId }}"><i class="layui-icon layui-icon-return"
                                                        style="margin-right: 10px"></i>BACK</a>
          <a><cite>用户管理</cite></a>
        </span>
            </div>
        </div>
    </div>
    <div id="main-placeholder" style="background-color: #fff;margin-left: 10px;">
        <div id="userModal" tabindex="-1" aria-hidden="true" style="width: 50%;margin:10px 0 0 10px; padding: 10px;">
            <form class="layui-form" action="/center/?userId={{ user.userId }}" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" value="{{ data.userName }}" required lay-verify="required"
                               placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" value="{{ data.password }}" required
                               lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" value="{{ data.email }}" required lay-verify="required"
                               placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单</label>
                    <div class="layui-input-block">
                        <input type="text" name="menu" value="{{ data.menu }}" required lay-verify="required"
                               placeholder="菜单信息" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">学历</label>
                    <div class="layui-input-block">
                        <input type="text" name="education" value="{{ data.education }}" required lay-verify="required"
                               placeholder="学历" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">专业</label>
                    <div class="layui-input-block">
                        <input type="text" name="major" value="{{ data.major }}" required lay-verify="required"
                               placeholder="专业" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--        <div class="layui-form-item">-->
                <!--          <label class="layui-form-label">手机号</label>-->
                <!--          <div class="layui-input-block">-->
                <!--            <input type="text" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">-->
                <!--          </div>-->
                <!--        </div>-->
                <!--        <div class="layui-form-item">-->
                <!--          <label class="layui-form-label">状态</label>-->
                <!--          <div class="layui-input-block">-->
                <!--            <input type="checkbox" name="" title="删除" lay-skin="primary">-->
                <!--          </div>-->
                <!--        </div>-->
                {% if status == 1 %}
                <div class="layui-form-item" id='message' style="display: none">
                    {% else %}
                    <div class="layui-form-item" id='message'
                         style="background-color: #FFEFFF; padding: 10px 5px;  color: #FF3366">
                        {% endif %}
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <div id="message-box" style="">{{ message }}</div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn layui-btn-normal">保存修改</button>
                        </div>
                    </div>
            </form>
        </div>
    </div>
    <div id="footer-placeholder"></div>
</div>

</body>
<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'layui/layui.js' %}"></script>
<script src="{% static 'js/xm-select.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>

<script>
  //菜单点击事件
  $(document).on('click','.menu-item',function (){
    let menuName = $(this).attr('data-page');

    if(!existMenus.includes(menuName)){
      existMenus.push(menuName)
      localStorage.setItem('menus',JSON.stringify(existMenus))
    }
    console.log( localStorage.getItem('menus'))
    location.href = '/common/' + menuName + '.html'
  });


  xmSelect.render({
    el: '#role',
    language: 'zn',
    initValue: [1],
<!--    data: [-->
<!--      {name: '首页', value: 1},-->
<!--      {name: '用户管理', value: 2},-->
<!--      {name: '后台管理', value: 3},-->
<!--    ]-->
        data : JSON.parse('{{ menus|safe }}')
  })


  function onDelete(){
    layer.confirm('确认删除此用户？', {
      btn: ['删除', '取消'] //可以无限个按钮
    }, function(index, layero){
      layer.msg('删除失败',{icon: 2});  //1-成功，2-失败
      layer.close(index); //如果设定了yes回调，需进行手工关闭
    }, function(index){
      //按钮【按钮二】的回调
    });
  }
  $(function(){
    $(".layui-nav-item").click(function (){
      // $(this).toggleClass('layui-nav-itemed')
      // let pageName = $(this).attr('data-page');
      // $("#main-placeholder").load(pageName+".html");
    });
  });

  layui.use('dropdown', function(){
    var dropdown = layui.dropdown
    dropdown.render({
      elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
      ,data: [{
        title: '退出登录'
        ,id: 100
        ,href: 'login.html'
      },
        {
          title: '个人中心'
          ,id: 100
          ,href: 'login.html'
        },
      ]
      ,id: 'demo1'
      //菜单被点击的事件
      ,click: function(obj){
        console.log(obj);
        layer.msg('回调返回的参数已显示再控制台');
      }
    });
  });

  let page = location.search.replace('?page=', '')
  layui.use('laypage', function(){
    var laypage = layui.laypage;
    laypage.render({
      elem: 'pagenation',
      curr: page,
      count: 50, //数据总数，从服务端得到
      jump: function(obj, first){
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数
        //首次不执行
        if(!first){
          location.href="index.html?page="+obj.curr
        }
      }
    });
  });

</script>
</html>